<template>
  <div
    style="
      width: 1170px;
      height: 800px;
      margin: -40px 0px -10px -10px;
      background-color: #ccc;
    "
  >
    <!--  视频插件  -->
    <div
      style="
        width: 400px;
        height: 400px;
        float: left;
        background-color: #fff;
        margin: 10px 0px 0px 10px;
      "
    >
      <div id="divPlugin" class="plugin"></div>
    </div>
    <!--  曲线A  -->
    <div style="flex-direction: column; display: flex; float: left">
      <div
        style="
          width: 385px;
          height: 195px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <twentyFourChartA
          :pointParam="pointParamVo1"
          :collectPoint="collectPoint"
          v-if="pointParamVo1.paramInfo != undefined && loadingChart"
        />
      </div>
      <!--  曲线B  -->
      <div
        style="
          width: 385px;
          height: 195px;
          float: left;
          background-color: #fff;
          margin: 10px 0px 0px 10px;
        "
      >
        <twentyFourChartB
          :pointParam="pointParamVo2"
          :collectPoint="collectPoint"
          v-if="pointParamVo2.paramInfo != undefined && loadingChart"
        />
      </div>
    </div>

    <!--  曲线C  -->
    <div
      style="
        width: 346px;
        height: 400px;
        float: left;
        background-color: #fff;
        margin: 10px 0px 0px 10px;
      "
    >
      <twentyFourChartC
        :pointParam="pointParamVo3"
        :collectPoint="collectPoint"
        v-if="pointParamVo3.paramInfo != undefined && loadingChart"
      />
    </div>
    <!--  *****第二排*****  -->
    <!--  云台  -->
    <div
      style="
        width: 378px;
        height: 370px;
        float: left;
        background-color: #fff;
        margin: 10px 0px 0px 10px;
      "
    >
      <el-card class="box-card">
        监控列表
        <el-select
          v-model="videoIndex"
          @change="changeVideo"
          style="margin-left: 2px"
        >
          <el-option
            v-for="(videoInfo, videoIndex) in videoInfos"
            :key="videoInfo.id"
            :label="videoInfo.name"
            :value="videoIndex"
          ></el-option>
        </el-select>
      </el-card>
      <el-card
        class="box-card"
        v-if="isYtFlag"
        style="text-align: center; height: 296px"
      >
        <div>
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(5)"
              @mouseup="mouseUpPTZControl"
            >
              左上
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(1)"
              @mouseup="mouseUpPTZControl"
            >
              向上
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(7)"
              @mouseup="mouseUpPTZControl"
            >
              右上
            </div>
          </div>
          <br />
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(3)"
              @mouseup="mouseUpPTZControl"
            >
              向左
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(9)"
              @mouseup="mouseUpPTZControl"
            >
              自动
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(4)"
              @mouseup="mouseUpPTZControl"
            >
              向右
            </div>
          </div>
          <br />
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(6)"
              @mouseup="mouseUpPTZControl"
            >
              左下
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(2)"
              @mouseup="mouseUpPTZControl"
            >
              向下
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(8)"
              @mouseup="mouseUpPTZControl"
            >
              右下
            </div>
          </div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        v-else
        style="
          text-align: center;
          pointer-events: none;
          background-color: #ccc;
          filter: alpha(Opacity=50);
          -moz-opacity: 0.5;
          opacity: 0.5;
        "
      >
        <div>
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(5)"
              @mouseup="mouseUpPTZControl"
            >
              左上
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(1)"
              @mouseup="mouseUpPTZControl"
            >
              向上
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(7)"
              @mouseup="mouseUpPTZControl"
            >
              右上
            </div>
          </div>
          <br />
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(3)"
              @mouseup="mouseUpPTZControl"
            >
              向左
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(9)"
              @mouseup="mouseUpPTZControl"
            >
              自动
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(4)"
              @mouseup="mouseUpPTZControl"
            >
              向右
            </div>
          </div>
          <br />
          <div class="el-button-group">
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(6)"
              @mouseup="mouseUpPTZControl"
            >
              左下
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(2)"
              @mouseup="mouseUpPTZControl"
            >
              向下
            </div>
            <div
              class="el-button primary"
              @mousedown="mouseDownPTZControl(8)"
              @mouseup="mouseUpPTZControl"
            >
              右下
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 点位数据 -->
    <div
      style="
        width: 378px;
        height: 370px;
        float: left;
        background-color: #fff;
        margin: 10px 0px 0px 10px;
      "
    >
      <el-card class="box-card">
        <el-row>
          <el-col :span="12">{{ collectPoint.name }}</el-col>
          <el-col :span="12">{{ realDataObj["collecTimes"] }}</el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" style="height: 314px">
        <div style="height: 262px">
          <el-scrollbar style="height: 100%">
            <el-row>
              <el-col
                v-for="pointParam in numPointParamObj"
                :key="pointParam.index"
                :span="12"
              >
                <span v-if="pointParam.paramInfo.paramType == 'num'">
                  <el-card class="box-card">
                    {{ pointParam.paramInfo.name }}：<span
                      v-html="realDataObj['param' + pointParam.paramId]"
                    ></span>
                    ({{ pointParam.paramInfo.unit }})
                  </el-card>
                </span>
              </el-col>
              <el-col
                v-for="pointParam in statePointParamObj"
                :key="pointParam.index"
                :span="12"
              >
                <span v-if="pointParam.paramInfo.paramType == 'state'">
                  <el-card class="box-card">
                    {{ pointParam.paramInfo.name }}：<span
                      v-html="realDataObj['param' + pointParam.paramId]"
                    ></span>
                  </el-card>
                </span>
              </el-col>
              <el-col
                v-for="pointParam in faultPointParamObj"
                :key="pointParam.index"
                :span="12"
              >
                <span
                  v-if="
                    pointParam.paramInfo.paramType == 'fault' &&
                    realDataObj[pointParam.paramId]
                  "
                >
                  <el-card class="box-card">
                    {{ pointParam.paramInfo.name }}：<span
                      v-html="realDataObj['param' + pointParam.paramId]"
                    ></span>
                  </el-card>
                </span>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </el-card>
    </div>
    <!-- 气象站数据 -->
    <div
      style="
        width: 376px;
        height: 370px;
        float: left;
        background-color: #fff;
        margin: 10px 0px 0px 10px;
      "
    >
      <el-card class="box-card">
        <el-row>
          <el-col :span="12">气象站</el-col>
          <el-col :span="12">{{ realDataObjWeather["collecTimes"] }}</el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" style="height: 314px">
        <el-row>
          <el-col
            v-for="(pointParam, i) in realDataObjWeather['pointParams']"
            :key="pointParam.index"
            :span="12"
            v-if="i < 5"
          >
            <span v-if="pointParam.paramInfo.paramType == 'num'">
              <el-card class="box-card">
                {{ pointParam.paramInfo.name }}：<span
                  v-html="realDataObjWeather[pointParam.paramId]"
                ></span>
                ({{ pointParam.paramInfo.unit }})
              </el-card>
            </span>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { queryRealData, realDataWeather } from "@/api/basic/hisMain";
import { listPointParam } from "@/api/basic/pointParam";
import { getVideoInfos } from "@/api/basic/videoInfo";
const twentyFourChartA = () => import("./twentyFourChartA");
const twentyFourChartB = () => import("./twentyFourChartB");
const twentyFourChartC = () => import("./twentyFourChartC");
import { WebVideoCtrl } from "@/assets/js/webVideoCtrl.js";

export default {
  name: "SiteDetail2",
  components: { twentyFourChartA, twentyFourChartB, twentyFourChartC },
  props: {
    collectPoint: {
      type: Object,
    },
  },
  data() {
    return {
      realDataObj: {},
      numPointParamObj: [],
      statePointParamObj: [],
      faultPointParamObj: [],
      realDataObjWeather: { pointParams: [] },
      queryParams: {
        mn: this.collectPoint.mn,
        pointId: this.collectPoint.id,
      },
      pointParamList: [],
      pointParamVo1: {
        paramInfo: {},
      },
      pointParamVo2: {
        paramInfo: {},
      },
      pointParamVo3: {
        paramInfo: {},
      },
      queryParamsParam: {
        pageNum: 1,
        pageSize: 100,
        pointId: this.collectPoint.id,
        paramType: "num",
      },
      loadingChart: false,
      videoInfos: [],
      videoIndex: null,
      // <!-- 视频监控
      hkvInfo: {
        ip: "", //海康威视摄像头/硬盘录像机的ip地址
        port: "", //海康威视摄像头/硬盘录像机的端口
        username: "", //海康威视摄像头/硬盘录像机的用户名
        password: "", //海康威视摄像头/硬盘录像机的密码
        channels: [], //海康威视摄像头/硬盘录像机的通道
      },
      hkvInfoOld: {
        //退出登入参数
        ip: "", //海康威视摄像头/硬盘录像机的ip地址
        port: "", //海康威视摄像头/硬盘录像机的端口
      },
      mySelectWnd: 0, //当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      iStreamType: 1,
      bZeroChannel: false,
      iRtspPort: 0,
      flag: true,
      isYtFlag: false,
      // 视频监控 -->
    };
  },
  watch: {
    collectPoint(val) {
      this.queryParamsParam.pointId = this.collectPoint.id;
      this.queryParams.pointId = this.collectPoint.id;
      this.getSiteFactor();
      this.getRealData();
      this.getRealDataWeather();
      this.getVideoInfos();
    },
  },
  created() {
    this.getSiteFactor();
    this.getRealData();
    this.getRealDataWeather();
    this.getVideoInfos();
  },
  mounted: function () {
    this.videoInitPlugin(); // 初始化video界面
  },
  destroyed: function () {
    this.clickStopRealPlay();
    this.onLogout();
  },
  methods: {
    /** 查询测点视频列表 */
    getVideoInfos() {
      this.flag = true;
      this.videoInfos = [];
      this.videoIndex = null;
      getVideoInfos({ pointId: this.queryParams.pointId }).then((response) => {
        this.videoInfos = response;
        if (this.videoInfos.length > 0) {
          this.videoIndex = 0;
          this.clkVideoInfo(this.videoInfos[0]);
        }
      });
    },
    clkVideoInfo(videoInfo) {
      if (videoInfo.isYt == "Y") {
        this.isYtFlag = true;
      } else {
        this.isYtFlag = false;
      }
      this.hkvInfo.ip = videoInfo.ipCode;
      this.hkvInfo.port = videoInfo.portCode;
      this.hkvInfo.username = videoInfo.account;
      this.hkvInfo.password = videoInfo.password;
      this.hkvInfo.channels = [];
      if (!this.flag) {
        this.onLogoutAndLogin();
      } else {
        this.onLogin();
      }
      if (this.flag) {
        this.flag = false;
      }
    },
    changeVideo() {
      this.clkVideoInfo(this.videoInfos[this.videoIndex]);
    },
    getRealData() {
      let that = this;
      this.realDataObj = {};
      this.numPointParamObj = [];
      this.statePointParamObj = [];
      this.faultPointParamObj = [];
      queryRealData(this.queryParams).then((response) => {
        this.realDataObj = response.data;
        this.realDataObj["pointParams"].forEach(function (pointParam) {
          if (pointParam.paramInfo.paramType == "num") {
            that.numPointParamObj.push(pointParam);
          } else if (pointParam.paramInfo.paramType == "state") {
            that.statePointParamObj.push(pointParam);
          } else if (pointParam.paramInfo.paramType == "fault") {
            that.faultPointParamObj.push(pointParam);
          }
        });
      });
    },
    getRealDataWeather() {
      this.realDataObjWeather = {};
      realDataWeather({}).then((response) => {
        this.realDataObjWeather = response.data;
      });
    },
    getSiteFactor() {
      this.pointParamList = [];
      this.pointParamVo1 = {};
      this.pointParamVo2 = {};
      this.pointParamVo3 = {};
      listPointParam(this.queryParamsParam).then((response) => {
        let _this = this;
        this.pointParamList = response.rows;
        this.pointParamList.forEach(function (pointParam, inx) {
          if (inx == 0) {
            _this.pointParamVo1 = pointParam;
          } else if (inx == 1) {
            _this.pointParamVo2 = pointParam;
          } else if (inx == 2) {
            _this.pointParamVo3 = pointParam;
          }
        });
        this.loadingChart = true;
      });
    },
    // <!-- 视频监控
    onLogin() {
      let that = this;
      that.loginLoading = true;
      // 登录设备
      WebVideoCtrl.I_Login(
        that.hkvInfo.ip,
        that.iProtocol,
        that.hkvInfo.port,
        that.hkvInfo.username,
        that.hkvInfo.password,
        {
          async: true,
          success: function (xmlDoc) {
            // console.log('xmlDoc2', xmlDoc);//不能删除
            //TODO 获取通道信息
            setTimeout(function () {
              that.getChannelInfo();
              that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
            }, 10);
            setTimeout(function () {
              that.hkvInfoOld.ip = that.hkvInfo.ip;
              that.hkvInfoOld.port = that.hkvInfo.port;
              that.clickStartRealPlay();
            }, 500);
            that.loginLoading = false;
            // that.$message({
            //   showClose: true,
            //   message: '登录成功',
            //   type: 'success'
            // });
          },
          error: function () {
            that.loginLoading = false;
            // that.$message({
            //   showClose: true,
            //   message: '登录失败',
            //   type: 'error'
            // });
          },
        }
      );
    },
    onLogoutAndLogin() {
      try {
        if (this.hkvInfoOld.ip != "" && this.hkvInfoOld.port != "") {
          // this.hkvInfo.channels = [];
          let szDeviceIdentify =
            this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
          let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
          if (0 == iRet) {
            // this.$message({
            //   showClose: true,
            //   message: '退出成功',
            //   type: 'success'
            // });
            this.hkvInfoOld.ip = "";
            this.hkvInfoOld.port = "";
            this.onLogin();
            return true;
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '退出失败',
            //   type: 'error'
            // });
            return false;
          }
        } else {
          this.hkvInfoOld.ip = "";
          this.hkvInfoOld.port = "";
          this.onLogin();
          return true;
        }
      } catch (err) {
        //console.log('错误！')
      }
    },
    onLogout() {
      if (this.hkvInfoOld.ip != "" && this.hkvInfoOld.port != "") {
        this.hkvInfo.channels = [];
        let szDeviceIdentify = this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
        let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
        if (0 == iRet) {
          // this.$message({
          //   showClose: true,
          //   message: '退出成功',
          //   type: 'success'
          // });
          this.hkvInfoOld.ip = "";
          this.hkvInfoOld.port = "";
          return true;
        } else {
          // this.$message({
          //   showClose: true,
          //   message: '退出失败',
          //   type: 'error'
          // });
          return false;
        }
      }
    },
    clickStartRealPlay() {
      this.clickStopRealPlay();
      // 开始预览
      let that = this;
      that.startPlayLoading = true;
      let szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;

      let j =
        that.hkvInfo.channels.length > 4 ? 4 : that.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(
          that.startRealPlay(szDeviceIdentify, i, that.hkvInfo.channels[i]),
          500
        );
      }
      that.startPlayLoading = false;
    },
    videoInitPlugin: function () {
      let iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
        return;
      }
      this.initPlugin();
    },
    initPlugin: function () {
      let that = this;

      WebVideoCtrl.I_InitPlugin(400, 400, {
        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 2,
        myCbSelWnd: function (xmlStr) {
          //自己新增的方法
          let jsonObj = that.$x2js.xml2js(xmlStr);
          that.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
          let szInfo = "当前选择的窗口编号：" + that.mySelectWnd;
          // console.log(szInfo);
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          //设置窗口1X1
          WebVideoCtrl.I_ChangeWndNum(1);
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              "检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"
            );
            return;
          }
        },
      });
    },
    getDevicePort: function (szDeviceIdentify) {
      let oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
      this.iRtspPort = oPort.iRtspPort;
    },
    startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
      let that = this;
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iRtspPort: that.iRtspPort,
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: that.bZeroChannel,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '开始预览通道' + iChannelID + '成功',
          //   type: 'success'
          // });
        },
        error: function (status, xmlDoc2) {
          // console.log(xmlDoc2)//不能删除
          // that.$notify({
          //   title: '失败',
          //   message: '开始预览通道' + iChannelID + '失败',
          //   type: 'error'
          // });
          if (status === 403) {
            // console.log("szInfo 设备不支持Websocket取流！");
          } else {
            // console.log("开始预览失败 ", status, xmlDoc2);
          }
        },
      });
    },
    clickStopRealPlay: function () {
      let j =
        this.hkvInfo.channels.length > 4 ? 4 : this.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(this.stopRealPlay(i), 1000);
      }
    },
    stopRealPlay: function (iWndIndex) {
      let that = this;
      WebVideoCtrl.I_Stop({
        iWndIndex: iWndIndex,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '停止预览窗口' + iWndIndex + '成功',
          //   type: 'success'
          // });
        },
        error: function () {
          // that.$notify({
          //   title: '失败',
          //   message: '停止预览窗口' + iWndIndex + '失败',
          //   type: 'error'
          // });
        },
      });
    },
    // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
    getChannelInfo: function () {
      let that = this;
      let szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
      // debugger
      // 数字通道
      that.hkvInfo.channels = [];
      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          // console.log('mysuccess I_GetDigitalChannelInfo: ', xmlStr)
          let jsonObj = that.$x2js.xml2js(xmlStr);
          let list =
            jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
          for (let x = 0; x < list.length; x++) {
            that.hkvInfo.channels.push(list[x].id);
          }
        },
        success: function (xmlDoc) {},
        error: function (status, xmlDoc) {
          // console.log("获取数字通道失败");
        },
      });
      // TODO 模拟通道
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          let jsonObj = that.$x2js.xml2js(xmlStr);
          // console.log("模拟通道mysuccess",xmlStr);
          // let list = jsonObj.VideoInputChannelList;
          // for (let x = 0; x < list.length; x++) {
          //   that.hkvInfo.channels.push(list[x].VideoInputChannel.id);
          // }
          var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
          that.hkvInfo.channels.push(id);
        },
        success: function (xmlStr) {
          // console.log("模拟通道success",xmlStr);
        },
        error: function (status, xmlDoc) {
          // console.log("模拟通道error",xmlDoc);
        },
      });
      // TODO 零通道
    },
    mouseDownPTZControl: function (iPTZIndex) {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        if (iPTZIndex === 9 && this.g_bPTZAuto) {
          // iPTZSpeed = 0;
        } else {
          this.g_bPTZAuto = false;
        }

        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: 4,
          mysuccess: function (xmlStr) {
            // console.log("I_PTZControl", xmlStr);
            if (iPTZIndex === 9 && this.g_bPTZAuto) {
              // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseDown");
            } else {
              // console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！mouseDown");
            }
            if (iPTZIndex === 9) {
              this.g_bPTZAuto = !this.g_bPTZAuto;
            }
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！mouseDown", status, xmlDoc);
          },
        });
      }
    },
    mouseUpPTZControl: function () {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          mysuccess: function (xmlStr) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseUp", xmlStr)
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！mouseUp", status, xmlDoc);
          },
        });
      }
    },
    // 视频监控 -->
  },
};
</script>
<style scoped>
.plugin {
  width: 400px;
  height: 400px;
}

.my-tag {
  margin-left: 3px;
}

.my-group-btn {
  margin-top: 5px;
}
</style>
<style scoped lang="scss">
::v-deep {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
